<template>
  <div class="error-page">
    <!-- 显示状态码 -->
    <p class="status-code">{{ statusCode }}</p>
    <p class="error-message">{{ message }}</p>
    <button @click="goBack">返回</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',  // 存储错误信息
      statusCode: '',  // 存储错误状态码
    };
  },
  created() {
    // 从路由传递过来的错误信息和状态码
    if (this.$route.query.message) {
      this.message = this.$route.query.message;
    } else {
      this.message = '发生了意外的错误。';
    }

    if (this.$route.query.statusCode) {
      this.statusCode = this.$route.query.statusCode;
    } else {
      this.statusCode = '未知错误';  // 如果没有状态码，则显示“未知错误”
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);  // 返回上一页
    }
  }
};
</script>

<style scoped>
.error-page {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* 垂直居中 */
  align-items: center;      /* 水平居中 */
  text-align: center;
  padding: 40px;
  font-family: Arial, sans-serif;
  background-color: #f4f6f9;
  min-height: 100vh;  /* 确保背景覆盖整个视口 */
  box-sizing: border-box;  /* 包含padding */
}

h1 {
  color: #e74c3c;
  font-size: 2.8rem;
  margin-bottom: 30px;
  font-weight: bold;
}

.status-code {
  background-color: #e74c3c;
  color: white;
  font-size: 4rem;  /* 增大字体 */
  padding: 20px 40px;
  border-radius: 10px;
  display: inline-block;
  margin-bottom: 25px;
  font-family: 'Arial Black', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: uppercase;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.error-message {
  font-size: 1.4rem;
  color: #333;
  margin-bottom: 40px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  font-weight: 400;
  text-align: center;
}

button {
  background-color: #e74c3c;
  color: white;
  padding: 12px 25px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1.1rem;
  transition: background-color 0.3s, transform 0.2s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: 20px; /* 给按钮一个上边距 */
  margin-bottom: 20px; /* 给按钮一个下边距 */
}

button:hover {
  background-color: #c0392b;
  transform: scale(1.05);
}

button:focus {
  outline: none;
}

</style>
